<template>
  <div>
    <h1>Counter</h1>
    <p>{{ count }}</p>
    <p>{{ bigCount }}</p>
    <select>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useCountStore } from "@/store/count";
import { storeToRefs } from "pinia";
const countStore = useCountStore();
//解构赋值，获取countStore中的count数据，但是会把响应式消除
//所以需要 storeToRefs包一下
const { count, bigCount } = storeToRefs(countStore);
console.log("@", bigCount);

function increment() {
  //使用pina修改数据，第一种直接改
  //countStore.count += 1;
  //使用pina修改数据，第二中方式，使用$patch方法批量修改
  //countStore.$patch({ count: 1 });
  //使用action方法修改数据
  countStore.increment(1);
  //使用ref修改数据
}
function decrement() {
  countStore.decrement(2);
}
</script>

<style lang="scss" scoped></style>
